<template>
<div class="main">
 <div class="top">
   标签搜索:<input type="text"  v-model="ke" placeholder="按回车确认" @keyup.enter="searchkey" />&nbsp;&nbsp;
   <button @click="show_all">全部标签</button>&nbsp;&nbsp;
   <button @click="un_check">清空标签</button>
   <span>
     <template v-for="(it,index) in define_cls_arrs">
     <label @click="classtags(it)">{{it}}</label>&nbsp;&nbsp;
     </template>
   </span>
 </div>
  <div class="con">
    <div v-if="show_loading" class="loading">Excel文件加载中，请稍后.......</div>
    <span class="item" v-for="(it,index) in define_arrs" :key="index">
      <input type="checkbox" :value="it" v-model="options" /> {{it}}
    </span>

  </div>
  <div class="tags">
    <p>选择的标签:</p>
    <textarea name="content" rows="5" placeholder="Tags">{{ret}}</textarea><br />
    <textarea name="content" rows="5" placeholder="Tags EN">{{ret_e}}</textarea><br />
    <button @click="un_check">清空标签</button>
  </div>
  <div class="tips">
    *注：用中英文有对应关系，也可以用英文标签搜索。&nbsp;<a href="http://mobi.carzj.cn/index/excel/upload" target="_blank">上传Excel</a>
  </div>
</div>
</template>

<script>
  import Vue from 'vue'
  import VueResource from 'vue-resource'
  Vue.use(VueResource);

    export default {
        name:'index',
        data () {
          return {
            ke:'',
            options:[],
            ret:'',
            ret_e:'',
            class_arrs:[],
            keywords_arrs:[],
            define_arrs:[],
            define_cls_arrs:[],
            tags_zh_arrs:[],
            tags_en_arrs:[],

            define_key:'',
            define_tags:'',
            define_tags_e:'',
            define_class:'',
            show_loading:false,
            api:'http://mobi.carzj.cn/index/excel/index.php'
            //api:'/static/tsconfig.json'
          }
        },
       methods:{
         searchkey:function(){ //搜索功能，中英文关键字切换搜索
             var val=this.ke,searchkey=''; //绑定文本框内容
             var that=this;
             var compStr='';
             if(val!='') {
               that.define_arrs=that.keywords_arrs; //还原数组

               that.define_arrs = that.define_arrs.filter(function (item,index) {
                 compStr=that.class_arrs[index] + '|||' + that.tags_zh_arrs[index] + '|||' + that.tags_en_arrs[index]; //中文和英文连接起来搜索
                 compStr=compStr.toLowerCase(); //转化成小写后进行搜索
                 searchkey=val.toLowerCase();
                 if (compStr.indexOf(searchkey) != -1) {
                   //console.log(compStr);
                   //console.log(item);
                   return item;
                 }
               });
             }else{
               that.show_all();
             }

         },
         show_all:function(){
           this.define_arrs=this.keywords_arrs;
           //console.log('complate!');
         },
         un_check:function(){
           this.ret='';
           this.ret_e='';
           this.options=[];
         },
         classtags(classname) {
            this.ke=classname;
         },
         isHasElementOne:function(arr,value){
            for(var i = 0,vlen = arr.length; i < vlen; i++){
              if(arr[i] == value){
                return i;
              }
            }
            return -1;
          },
         replaceAll:function(s1,s2){
           return this.replace(new RegExp(s1,"gm"),s2);
         },
         isHasElement:function(arr,value){
            var str = arr.toString();
            var index = str.indexOf(value);
            if(index >= 0){
              value = value.toString().replace(/(\[|\])/g,"\\$1");
              var reg1 = new RegExp("((^|,)"+value+"(,|$))","gi");
              return str.replace(reg1,"$2@$3").replace(/[^,@]/g,"").indexOf("@");
            }else{
              return -1;//不存在此项
            }
          }
    },
      created:function(){
        //获取远程数据，对象绑定
        var that=this;
        //定义两个原始数组，用于获取对应中英文的下标

        that.show_loading=true;

        // JSONP
        that.$http.jsonp(that.api,{jsonp:"_callback"}).then(response => {

          let json_data=response.body;

          //console.log(json_data);

          that.show_loading=false;

          //解析json对象
          let classname=json_data.classname;
          let keywords=json_data.keywords.replaceAll(",","，"); //替换逗号
          let tag_zh=json_data.tag_zh;
          let tag_en=json_data.tag_en;

          that.class_arrs=classname.split('|||');
          that.keywords_arrs=keywords.split('|||');
          that.tags_zh_arrs=tag_zh.split('|||');
          that.tags_en_arrs=tag_en.split('|||');

          that.define_arrs=that.keywords_arrs; //默认显示关键字的选项

          var cls_f=that.class_arrs[0];
          that.define_cls_arrs.push(cls_f);
          for(let i =0;i<that.class_arrs.length;i++){
              if(cls_f!==that.class_arrs[i]){
                  cls_f=that.class_arrs[i];
                that.define_cls_arrs.push(cls_f);
              }
          }

          //console.log(that.class_arrs);
          //console.log(that.keywords_arrs,that.tags_zh_arrs,that.tags_en_arrs);

        }, response => {
          // error callback
        });

      },
        watch:{
            options:function(val){
                //console.log(val.toString());
                var sel_str='';
                sel_str=val.toString(); //把选择的串连接成字符串，用于匹配其他数组

                //匹配并设置中英文标签
                if(sel_str !=''){
                    this.ret='';
                    this.ret_e='';
                    let t = sel_str.split(",");
                    //console.log(this.keywords_arrs);
                    for(var i=0;i<t.length;i++){

                      //标签所在的下标
                      let idx=this.isHasElementOne(this.keywords_arrs,t[i]);

                      //console.log(t[i])

                      this.ret=this.ret + this.tags_zh_arrs[idx] + ",";
                      this.ret_e=this.ret_e + this.tags_en_arrs[idx] + ",";
                    }
                    if(this.ret.substr(-1)==','){this.ret=this.ret.substr(0,this.ret.length-1);}
                    if(this.ret_e.substr(-1)==','){this.ret_e=this.ret_e.substr(0,this.ret_e.length-1);}
                }else{
                    this.ret='';
                    this.ret_e='';
                }

            },
            ke:function(val){
                this.searchkey();
            }
        }
    }
</script>

<style scoped>
  *{
    margin:0;
    padding:0;
    font-size:14px;
  }
  body{
    margin:0;
    padding:0;

  }
  .main{
    text-align:left;

  }
  .top{
    height:40px;
  }
  .con{
    line-height:22px;
    font-size:12px;
    height:200px;
    width:850px;
    overflow-y: scroll;
  }
  .con .item{
    width:160px;
    height:22px;
    display: inline-block;

  }
  .tags{
    height:auto;
    overflow:hidden;
  }
  .tags textarea{width:848px}
  .tips{font-size:14px;color:#999999;}
  button{padding:3px;}
  .loading{font-size:14px;color:#cc0000;margin-bottom:10px;text-align:left;}
  label{font-weight:bold;}
</style>
